<template>
  <div> 
    <el-card class="box-card">

      <div class="box-img">
        <el-image 
          v-show="imgUrl !== ''"
          :src="imgUrl"  
          style="width: 180px;"
          :preview-src-list="[imgUrl]"
        />
      </div>

      <div class="box-text"> 
        <p> {{author}} <a v-show="pdfUrl !== ''" :href="pdfUrl" class="pdf">[pdf]</a> </p>
        <p><strong> {{title}} </strong></p>
        <p><i>{{journal}}</i></p>
      </div>
    </el-card>
  </div>
</template>

<script>

export default {
  props: {
    author: {type:String,default:""},
    title: {type:String,default:""},
    journal: {type:String,default:""},
    pdfUrl: {type:String,default:""},
    imgUrl: {type:String,default:""},
  }



}
</script>

<style lang="less" scoped>
  /deep/.el-card{ border-radius: 10px;margin: 10px 0px;}
  /deep/.el-card__header{ padding: 10px 10px;}
  
  .box-text{ font-size:18px; text-align: left;}
  .box-img{ float:left; padding-right: 10px; }
  .pdf{
    background: left no-repeat  url(""); 
    padding-left: 18px;
    float: right; margin-right: 10px;font-weight:bold;
  }
</style>
